<template>
  <a-modal
    :title="title"
    :visible="visible"
    :width="modalWidth"
    @ok="handleOk"
    @cancel="close"
  >
    <a-spin tip="Loading..." :spinning="id_Loading">
      <!-- <a-radio-group v-model="matchType" @change="radioChange">
        <a-radio-button value="team"> 统一选择 </a-radio-button>
        <a-radio-button value="apart"> 分别选择 </a-radio-button>
      </a-radio-group> -->
      <div style="width:100%; padding:10px 5px;max-height:500px;overflow-y: auto;">
        <!-- 推广标识 -->
        <div style="margin-top:10px" v-if="selectType === 'logoName'">
          <a-textarea
            v-model="logoValue"
            placeholder="请填写推广标识 ( 2个字以上 )"
            :auto-size="{ minRows: 3, maxRows: 8 }"
          />
        </div>
        <!-- 商品库 商品 -->
        <div style="margin-top:10px" v-if="selectType === 'productPlatform'">
          <select-product :selectAccountID="selectAccountID" v-model="productPlatform" />
        </div>
        <!-- 落地页链接 -->
        <div v-else-if="selectType === 'external_url'">
          <a-tabs @change="linkTagsChange">
            <a-tab-pane
              v-for="(item,index) in ['橙子落地页','程序化落地页','第三方落地页']"
              :key="index"
              :tab="item"
            >
              <div v-if="index === 0">
                <div class="external_url">
                  <div :class="['external-link' , external_is === external.siteId ? 'select-external' : '' ]" v-for="external,index in linkDatas" :key="index">
                    <external-link :linkData="external" @handleMenuClick="handleMenuClick(external)">
                      <template slot="clickUse">
                        <span class="action">点击选择</span>
                      </template>
                    </external-link>
                  </div>
                </div>
                <pagination
                  v-show="total>0"
                  :total="total"
                  :page.sync="queryParam.page"
                  :limit.sync="queryParam.page_size"
                  @pagination="getList"
                />
              </div>
              <div v-else-if="index === 1">
                <link-group :selectAccountID="selectAccountID" v-model="thirdSiteLinksGropup" @selectLinksGroup="selectLinksGroup"></link-group>
              </div>
              <div v-else style="margin:20px 0;">
                <a-input v-model="thirdSiteLink" placeholder="请输入第三方落地页链接" allow-clear />
              </div>

            </a-tab-pane>
          </a-tabs>
        </div>
        <!-- 创意组、定向包、广告组、转化配置 -->
        <div v-else>
          <div style="width:100%;margin-bottom:10px">
            <a-input-search placeholder="搜索" @search="onSearch" />
          </div>
          <div style="width:100%;padding:10px;background-color:#C3C3C4;">
            列表
          </div>
          <a-checkbox-group
            v-if="selectType === 'campaign_id' || selectType === 'audience_templete_id' || selectType === 'convert_id' "
            v-model="checkbox"
          >
            <a-list bordered :data-source="showData">
              <a-list-item slot="renderItem" slot-scope="item">
                <a-checkbox
                  style="width:100%;padding:5px;"
                  :disabled="is_disabled(item)"
                  :value="item"
                >
                  {{ item.name }}
                </a-checkbox>
              </a-list-item>
            </a-list>
          </a-checkbox-group>

          <a-checkbox-group
            v-if="selectType === 'creatives' "
            v-model="checkbox"
          >
            <a-list bordered :data-source="showData">
              <a-list-item slot="renderItem" slot-scope="item">
                <a-checkbox
                  style="width:100%;padding:5px;"
                  :disabled="is_disabled(item)"
                  :value="item"
                >
                  {{ item.creative_group_name }}
                </a-checkbox>
              </a-list-item>
            </a-list>
          </a-checkbox-group>
        </div>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import { getSite } from "@/api/headlinesApi";  // 橙子建站落地页链接
import { getConvertListGet } from "@/api/adv/convert"; // 转化配置

export default {
  components:{
    'externalLink':()=>import('./externalLink'),
    'selectProduct':()=>import('./selectProduct'),
    'linkGroup':()=>import('./linkGroup'),
  },
  props:{
    selectType:{
      type:String,
      default:'package'
    },
    selectAccountID:{
      type:String,
      require:true,
    }
  },
  data(){
    return {
      id_Loading:true,
      modalWidth:'30%',
      data:[],  // 总数据
      showData:[],
      title:'',
      visible: true,
      matchType:'team',  // 选项类型，统一/分别
      checkbox:[],  // 已选数据
      // 落地页链接
      queryParam:{
        advertiser_id:this.selectAccountID,
        page:1,
        page_size:20,
        status:'SITE_ONLINE'
      },
      external_is:'', // 落地页  判断是否选中（样式）
      total:0,
      id_select_external:false,
      linkDatas:[],  // 落地页链接

      logoValue:'',  // 推广标识
      linkIndex:'',  // 落地页索引   (暂时没用)
      thirdSiteLink:'', // 第三方落地页链接
      thirdSiteLinksGropup:'', // 第三方落地页链接组
      // downloadUrl:'',  //下载链接 （自填）
      productPlatform:'', // 关联小说（商品）
    }
  },
  computed:{
    is_disabled(){
      return function (params) {
        let _is = false
        if( this.matchType === 'team' && this.selectType !== 'creatives' ){
          this.checkbox.forEach( ele => {
            _is = ele.id === params.id ? false : true
          });
        }else {
          this.checkbox.forEach( ele => {
            _is = ele.creative_group_name === params.creative_group_name ? false : true
          });
        }
        return _is
      }
    }
  },
  created(){
    this.getList()
  },
  methods:{
    async getList(){
      // 广告组
      if( this.selectType === 'campaign_id'){
        this.title = '请选择广告组'
        let campaign = JSON.parse(localStorage.getItem('campaign'))
        campaign.campaign_id.forEach( ele => {
          if( ele.account_id === this.selectAccountID)  this.data.push(ele)
        });
        this.showData = this.data
      }
      // 定向包
      if( this.selectType === 'audience_templete_id' ){
        this.title = '请选择定向包'
        let packages = JSON.parse(localStorage.getItem('ad')).package
        this.data = packages
        this.showData = this.data
      }
      // 创意组
      if( this.selectType === 'creatives' ){
        this.title = '请选择创意组'
        let packages = JSON.parse(localStorage.getItem('CreativeGroups'))
        this.data = packages
        this.showData = this.data
      }
      // 转化配置
      if( this.selectType === 'convert_id' ){
        this.title = '请选择转化配置'
        let quest = {
          account_id:this.selectAccountID,
          status:'AD_CONVERT_STATUS_ACTIVE'
        }
        const res = await getConvertListGet(quest)
        this.data = res.data
        this.showData = this.data
      }
      // 推广标识
      if( this.selectType === 'logoName' ){
        this.title = '请填写推广标识'
      }
      // 商品库 商品
      if( this.selectType === 'productPlatform' ){
        this.title = `请选择关联小说 ${ this.selectAccountID }`
        this.modalWidth = '35%'
      }
      // 落地页链接
      if( this.selectType === 'external_url' ){
        this.title = '请选择落地页下载链接'
        this.modalWidth = '50%'
        const res = await getSite(this.selectAccountID,this.queryParam)
        this.linkDatas = res.data.list
        this.total = res.data.page_info.total_number
      }
      this.id_Loading = false
    },
    // 确认数据
    handleOk(){
      let type = 'double'  // odd：{整个对象}   double：obj.id
      if( this.selectType === 'productPlatform' ){
        this.checkbox.push(this.productPlatform)
        type = 'odd'
      }
      if( this.selectType === 'logoName' ){
        this.checkbox.push(this.logoValue)
      }
      if( this.selectType === 'external_url' ){
        if( this.linkIndex === 1 ) this.checkbox.push(this.thirdSiteLinksGropup.trim())
        else this.checkbox.push(this.thirdSiteLink.trim())
        type = 'odd'
      }
      if( this.checkbox.length > 0){
        // if( this.selectType === 'external_url' && this.linkIndex === 0 ) type = 'odd'
        if( this.selectType === 'logoName' ) type = 'odd'
        this.$emit( 'batchChange',this.checkbox,type )
      }else {
        alert('请选择/填写内容')
      }
    },
    // 落地页链接切换
    linkTagsChange(activeKey){
      this.external_is = ''
      this.thirdSiteLink = ''
      this.linkIndex = activeKey
    },
    // 选择已有落地页(橙子)链接
    handleMenuClick(links){
      this.external_is = links.siteId
      this.thirdSiteLink = `https://www.chengzijianzhan.com/tetris/page/${ links.siteId }/`
    },
    // 选择落地页链接组
    selectLinksGroup(links){
      this.thirdSiteLinksGropup = links
    },
    // 选择筛选方式 清空已选数据
    // radioChange(){
    //   this.checkbox = []
    // },
    // 搜索
    onSearch(value){
      // 模糊筛选字段
      let searchField = this.selectType === 'creatives' ? [ 'creative_group_name' ] : ['name','id']
      if(value){
        this.showData = this.$searchStr(value,this.data,searchField)
      }else {
        this.showData = this.data
      }
    },
    close(){
      this.$parent.openOrCloseModel()
    },
  }
}
</script>

<style lang="less" scoped>

  @main-color: #1890FF;
  .ant-list-item{
    padding: 5px 20px;
  }
  .action{
    width: 100%;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: white;
    background-color: #1890FF;
    position: absolute;
    left: 0;
    bottom: 0;
    cursor: pointer;
  }
  .ant-checkbox-group{
    width: 100%;
  }
  .ant-input-group-addon{
    padding: 0;
  }
  .external_url{
    box-sizing:border-box;
    margin-top:10px;
    display: flex;
    flex-flow: wrap;
    .external-link{
      width: 24%;
      border-radius:5px;
      overflow: hidden;
      margin-bottom: 10px;
      margin: 0 1% 10px 0;
      box-shadow: 1px 1px 5px #888888;
    }
    .select-external{
      transform: scale(0.9);
      border: 1px solid @main-color;
    }
  }
</style>